<template>
  <input type="file" @change="onChange" />

  <img :src="imgUrl" alt="" />
</template>

<script lang="ts" setup>
import md5 from 'md5'
import { ref } from 'vue'

const imgUrl = ref('')

function onChange1(event: Event) {
  // 1. 获取 file
  const file = (event.target as HTMLInputElement).files?.[0] as File
  console.log('file', file)

  // 2. 获取 file 的内容
  //    FileReader 获取文件内容的一个东西
  //    2.1 创建一个 FileReader 对象
  const fr = new FileReader()
  //    2.2 监听 onload 事件，该事件在读取成功之后触发
  fr.onload = function () {
    //  2.4 读取成功，获取 result 结果
    console.log('读取成功', this.result)
    //  2.5 进行 md5 操作
    const hash = md5(this.result as string)
    console.log('hash', hash)
  }
  //    2.3 调用对应的读取方法来读
  fr.readAsText(file)

  // const str = '123456'
  // const hash = md5(file)
  // console.log('hash', hash)
}

function onChange(event: Event) {
  /**
   * 读取一个图片的 base64 ，然后直接渲染到页面上
   *
   * 图片预览功能
   */

  const file = (event.target as HTMLInputElement).files?.[0] as File

  const fr = new FileReader()

  fr.onload = function () {
    console.log('this.result', this.result)
    imgUrl.value = this.result as string
  }

  fr.readAsDataURL(file)
}
</script>
